/*
 * @Author: your name
 * @Date: 2020-04-08 11:02:34
 * @LastEditTime: 2020-04-08 15:04:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vscode-as-markdown-editor/webpack_jspjiaocheng/all_part_demo/webpack_config/webpack.common.js
 */

const path = require("path");
const glob = require('glob');
const uglifyjs = require("uglifyjs-webpack-plugin");
const htmlPlugin = require("html-webpack-plugin");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const purgecssPlugin = require('purgecss-webpack-plugin');
const webpack = require("webpack");
const copyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    //source-map //打包生成单独文件filename.map结尾，错误信息精确到行和列
    //cheap-module-source-map //也生成单独文件，只精确到行
    //eval-source-map // 错误信息融合到js原文件，精确到行和列
    //cheap-module-eval-source-map// 错误信息融合到js原文件，只精确到行
    // 需要注意的是：eval-source-map和cheap-module-eval-source-map打包迅速，但是不安全，只能在开发环境中使用，生产环境需要将devtool删除。
    // 而且现在的电脑环境，不必要为了一点点性能而忽视了安全，所以还是用source-map比较好。

    devtool: 'source-map',
    entry: {
        entry1: "./src/entry.js",
        entry2: "./src/entry2.js",
        reactdemo: "./src/reactdemo.jsx"
    },
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "[name].js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            loader: [{
                loader: miniCssExtractPlugin.loader
            },
                'css-loader',
                'postcss-loader'
            ]
        }, {
            test: /\.less$/,
            loader: [miniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader'],
        }, {
            test: /\.(scss|sass)$/,
            loader: [miniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader'],
        }, {
            test: /\.(js|jsx)/,
            loader: {
                loader: 'babel-loader'
            },
            exclude: /node_modules/
        }, {
            test: /\.(png|jpg|jpeg|gif)$/,
            loader: [{
                loader: "url-loader",
                options: {
                    outputPath: "images/",
                    limit: 36051 // webpack会复制图片文件到dist
                    // limit: 36053 // webpack 会将此图转为base64格式保存到js中
                    // limit的单位是Byte
                    // 1k=1024 Byte
                    // 10k=10240 Byte                        
                    // 本例图片36052 Byte
                    // 图片大小为：36052/1024=35.2k
                    // 当limit大于36052时，本例图片会被转为base64到js文件中输出
                    // 当limit小于36052时，本例图片会复制图片到js输出目录.
                }
            }]
        }
        ]
    },
    plugins: [
        new htmlPlugin({
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/index.html'
        }),
        // new miniCssExtractPlugin('css_out/index.css')等价于下面的写法：
        new miniCssExtractPlugin({
            filename: 'css_out/index.css'
            // filename: '[name].css',
            // chunkFilename: '[id].css',
            // ignoreOrder: false
        }),
        new purgecssPlugin({
            paths: glob.sync(path.join(__dirname, '../src/*.html'))
        }),
        new webpack.ProvidePlugin({
            // 使用webpack.ProvidePlugin的好处是:
            // 如果第三方库在js代码中没有使用，就不会打包
            // 如果直接在js中import后使用，那么该库有没有使用，都会被打包
            JQuery: "jquery",
            $: "jquery",
            React: "react",
            ReactDOM: "react-dom"
        }),

        // 打包后的文件头部添加版权信息：
        new webpack.BannerPlugin("徐某某版权所有，欢迎模仿！"),

        new copyWebpackPlugin([{
            // from，to的意思是：从哪个文件夹打包到哪个文件夹。
            // 支持子目录
            from: path.resolve(__dirname, "../src/direct_copy_to_dist"),
            to: "./direct_copy_to_dist"
        }])
    ],
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        host: "192.168.1.5",
        compress: true,
        port: "1818"
    },
    // mode的值由package.json的exports type=production/development传来
    // 如果package.json没配置会出错。
    // 已在wpackage.json中配置，此处就注释掉了。
    // mode: "production",

    optimization: {
        // uglifyjs只在生产环境中生效，但是生产环境webpack默认也有压缩js功能
        // 默认压缩功能和uglifyjs的区别是什么？还有待研究
        minimizer: [new uglifyjs()]
    },
    watch: false,//开启或关闭自动打包功能，打包为表态文件（区别于webpack-dev-server的打包到内存-即本地服务器）
    watchOptions: {
        //600ms内的所有修改：聚合为一次修改，并放入队列
        aggregateTimeout: 600,
        // 1s查询一次aggregateTimeout队列，队列有就依次执行打包
        poll: 1000,
        // 不监听这些文件的变动
        ignored: ['node_modules']
    }
}